<template>
  <div class="nav">
    <van-nav-bar
      title="标题"
      left-text="西安"
      right-text="我的"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #title>
        <van-search
          label="地址"
          placeholder="立柜式空调"
          shape="round"
          background="#f66"
          @click="onSearch"
        >
          <template #label>
            <img
              src=""
              alt=""
            />
            <span>&nbsp;&nbsp;|</span>
          </template>
        </van-search>
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
export default {
  methods: {
    onClickLeft() {
      // 计划跳转城市列表
      this.$router.push("/City").catch((err) => {});
    },
    onClickRight() {
      // 计划跳转我的页面
      this.$router.push("/Mine").catch((err) => {});
    },
    onSearch(val) {
      this.$router.push("/Search").catch((err) => {});
    },
  },
  data() {
    return {
      value: "",
    };
  },
};
</script>

<style scoped>
.nav {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 666;
}
.van-nav-bar {
  background: #f66;
}
.van-search {
  width: 100%;
  height: 46px;
}

.van-search__label img {
  vertical-align: middle;
}

.van-search__label {
  color: #999;
}

.van-nav-bar__text {
  color: #fff;
}

.van-icon:before {
  color: #999;
}
</style>